// ==UserScript==
// @name         B站倍速控制可拖动
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  Add a slider to control video playback rate on Bilibili | By sufy
// @author       sufy
// @match        https://www.bilibili.com/*
// @match        https://www.iqihang.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const primaryColor = '#fb7299';
    const secondaryColor = '#00a1d6';
    const maxSpeed = 4;

    const sliderContainer = document.createElement('div');
    sliderContainer.style.position = 'absolute';
    sliderContainer.style.top = '10px';
    sliderContainer.style.right = '10px';
    sliderContainer.style.zIndex = 9999;
    sliderContainer.style.width = '140px';
    sliderContainer.style.padding = '6px';
    sliderContainer.style.backgroundColor = '#fff';
    sliderContainer.style.boxShadow = 'rgba(251, 114, 153, 0.6) 0px 1px 4px 0px';
    sliderContainer.style.borderRadius = '8px';
    sliderContainer.style.cursor = 'move';
    sliderContainer.style.userSelect = 'none';
    sliderContainer.style.pointerEvents = 'auto';

    const slider = document.createElement('input');
    slider.type = 'range';
    slider.min = '0.5';
    slider.max = maxSpeed;
    slider.step = '0.05';
    slider.value = '1';
    slider.style.width = '100%';
    slider.style.backgroundImage = `linear-gradient(to right, ${primaryColor}, ${primaryColor} ${(slider.value - slider.min) / (slider.max - slider.min) * 100}%, #ddd ${(slider.value - slider.min) / (slider.max - slider.min) * 100}%, #ddd)`;
    slider.style.border = 'none';
    slider.style.outline = 'none';
    slider.style.appearance = 'none';
    slider.style.height = '4px';
    slider.style.marginTop = '8px';
    slider.style.borderRadius = '6px';
    sliderContainer.appendChild(slider);

    const sliderLabel = document.createElement('p');
    sliderLabel.innerHTML = `速度: ${slider.value}x | by sufy`;
    sliderLabel.style.margin = '6px 0';
    sliderLabel.style.color = secondaryColor;
    sliderLabel.style.textAlign = 'center';
    sliderLabel.style.fontSize = '12px';
    sliderContainer.appendChild(sliderLabel);

    // 创建播放时间标签
    const timeLabel = document.createElement('p');
    timeLabel.style.margin = '6px 0';
    timeLabel.style.color = secondaryColor;
    timeLabel.style.textAlign = 'center';
    timeLabel.style.fontSize = '12px';
    sliderContainer.appendChild(timeLabel);

    const speedInput = document.createElement('input');
    speedInput.type = 'number';
    speedInput.min = '0.5';
    speedInput.max = maxSpeed;
    speedInput.step = '0.1';
    speedInput.value = '1';
    speedInput.style.width = '100%';
    speedInput.style.backgroundColor = '#fff';
    speedInput.style.border = '1px solid #ddd';
    speedInput.style.outline = 'none';
    speedInput.style.height = '20px';
    speedInput.style.marginTop = '8px';
    speedInput.style.borderRadius = '6px';
    sliderContainer.appendChild(speedInput);

    const resetButton = document.createElement('button');
    resetButton.innerHTML = '复位';
    resetButton.style.marginTop = '6px';
    resetButton.style.width = '100%';
    resetButton.style.backgroundColor = primaryColor;
    resetButton.style.color = '#fff';
    resetButton.style.border = 'none';
    resetButton.style.borderRadius = '6px';
    resetButton.style.outline = 'none';
    resetButton.style.height = '20px';
    sliderContainer.appendChild(resetButton);

    document.body.appendChild(sliderContainer);

    const setPlaybackRate = (rate) => {
        const video = document.querySelector('video');
        if (video) {
            video.playbackRate = rate;
        }
    };
    setPlaybackRate(slider.value);

    // 更新播放时间
    const updateTime = () => {
        const video = document.querySelector('video');
        if (video) {
            const remainingTime = (video.duration - video.currentTime) / video.playbackRate;
            const minutes = Math.floor(remainingTime / 60);
            const seconds = Math.floor(remainingTime % 60);
            timeLabel.innerHTML = `播放时间: ${minutes}分${seconds}秒`;
        }
    };

    // 立即更新播放时间
    updateTime();

    // 每秒更新播放时间
    setInterval(updateTime, 1000);

    let isDragging = false;
    let offset = {x: 0, y: 0};
    sliderContainer.addEventListener('mousedown', (event) => {
        isDragging = true;
        offset.x = event.offsetX;
        offset.y = event.offsetY;
    });

    document.addEventListener('mousemove', (event) => {
        if (isDragging) {
            requestAnimationFrame(() => {
                let leftPosition = event.clientX - offset.x;
                let topPosition = event.clientY - offset.y;

                // 新增的代码，限制移动范围到屏幕内
                let containerWidth = sliderContainer.offsetWidth;
                let containerHeight = sliderContainer.offsetHeight;
                let maxWidth = window.innerWidth - containerWidth;
                let maxHeight = window.innerHeight - containerHeight;

                leftPosition = Math.max(0, Math.min(maxWidth, leftPosition));
                topPosition = Math.max(0, Math.min(maxHeight, topPosition));

                sliderContainer.style.left = `${leftPosition}px`;
                sliderContainer.style.top = `${topPosition}px`;
            });
        }
    });

    document.addEventListener('mouseup', () => {
        isDragging = false;
    });

    slider.addEventListener('mousedown', (event) => {
        event.stopPropagation();
    });

    slider.addEventListener('input', () => {
        const rate = slider.value;
        sliderLabel.innerHTML = `速度: ${rate}x | by sufy`;
        slider.style.backgroundImage = `linear-gradient(to right, ${primaryColor}, ${primaryColor} ${(slider.value - slider.min) / (slider.max - slider.min) * 100}%, #ddd ${(slider.value - slider.max) / (slider.min - slider.max) * 100}%, #ddd)`;
        setPlaybackRate(rate);
        speedInput.value = rate;
        updateTime();
    });

    speedInput.addEventListener('input', () => {
        const rate = parseFloat(speedInput.value);
        if (rate >= parseFloat(speedInput.min) && rate <= parseFloat(speedInput.max)) {
            slider.value = rate;
            sliderLabel.innerHTML = `速度: ${rate}x | by sufy`;
            slider.style.backgroundImage = `linear-gradient(to right, ${primaryColor}, ${primaryColor} ${(slider.value - slider.min) / (slider.max - slider.min) * 100}%, #ddd ${(slider.value - slider.max) / (slider.min - slider.max) * 100}%, #ddd)`;
            setPlaybackRate(rate);
        }
        updateTime();
    });

    resetButton.addEventListener('click', () => {
        slider.value = '1';
        speedInput.value = '1';
        sliderLabel.innerHTML = `速度: ${slider.value}x | by sufy`;
        slider.style.backgroundImage = `linear-gradient(to right, ${primaryColor}, ${primaryColor} ${(slider.value - slider.min) / (slider.max - slider.min) * 100}%, #ddd ${(slider.value - slider.max) / (slider.min - slider.max) * 100}%, #ddd)`;
        setPlaybackRate(slider.value);
        updateTime();
    });

})();
